<template>
  <div>
    <button @click="show = !show">Toggle</button>

    <hr />

    <HelloWorld v-if="show" />
  </div>
</template>

<script>
// 静态导入
// import HelloWorld from './components/HelloWorld.vue'

import Loading from './components/Loading.vue'

// 导入 vue 模块的 defineAsyncComponent 的方法
import { defineAsyncComponent, h } from 'vue'

export default {
  components: {
    // 1. 返回一个 Promise, resolve 出一个组件的内容
    // HelloWorld: defineAsyncComponent(() => {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve({
    //         render() {
    //           return h('div', null, '我是一个div')
    //         }
    //       })
    //     }, 3000)
    //   })
    // })

    // 2. 也可以简化直接返回一个 import 函数的调用接口
    //    1. 当前 HelloWorld.vue 这个组件的内容会编译过程中单独生产一个 js 文件
    // HelloWorld: defineAsyncComponent(() => import('./components/HelloWorld.vue'))

    HelloWorld: defineAsyncComponent({
      // 加载组件的函数
      // loader: () =>
      //   new Promise((resolve) => {
      //     setTimeout(() => {
      //       resolve({
      //         render() {
      //           return h('div', null, '我是一个div')
      //         }
      //       })
      //     }, 3000)
      //   }),

      loader: () => import('./components/HelloWorld.vue'),

      // 加载过程中使用的组件，做一个转圈
      loadingComponent: Loading
    })
  },

  data() {
    return {
      show: false
    }
  }
}
</script>
